<template>
	<view class="content">
		<nav-top :showType='1'></nav-top>
		<view class="content-title">
			<view>
				油枪管理
			</view>
			<view class="content-title-rt">
				<van-button plain hairline type="primary" size="small" @click="onClickAdd">新增油枪</van-button>
			</view>
		</view>
		<view class="content-box">
			<view class="item-box">
				<view>油枪编号</view>
				<view>油枪类型</view>
				<view>油枪状态</view>
			</view>
			<view class="item-box shadow" v-for="(item,index) in list">
				<view>{{ item.name }}号</view>
				<view class="border-box" v-if="item.fuelTypeId == 1">92#汽油</view>
				<view class="border-box" v-if="item.fuelTypeId == 2">95#汽油</view>
				<view class="border-box" v-if="item.fuelTypeId == 3">98#汽油</view>
				<view class="border-box" v-if="item.fuelTypeId == 4">0#汽油</view>
				<view class="border-box"><van-switch size="40rpx" :model-value="item.status == 'on' ? true : false" @click="onUpdateValue(item)" />
				</view>
			</view>
		</view>
		<!-- 添加油枪弹窗 -->
		<van-popup v-model:show="showAdd" round :style="{ padding: '20px' }">
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="fromData.username" type="number" name="油枪编号" label="油枪编号" placeholder="请输入油枪编号"
						:rules="[{ required: true, message: '请填写油枪编号' }]" />
					<van-field v-model="roleText" name="油枪类型" label="油枪类型" placeholder="请选择油枪类型"
						:rules="[{ required: true, message: '选择油枪类型' }]" @click="showPicker = true" />
					<van-field name="switch" label="开关">
						<template #input>
							<van-switch v-model="checked2" size="36rpx" />
						</template>
					</van-field>
				</van-cell-group>

				<div style="margin: 16px;">
					<van-button round block type="primary" native-type="submit">
						确认添加
					</van-button>
				</div>
			</van-form>
		</van-popup>
		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
		</van-popup>

	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		watchEffect,
		watch,
		onMounted
	} from 'vue'
	import NavTop from '@/components/NavTop.vue'
	import { showNotify } from 'vant';
	import {
		showConfirmDialog
	} from 'vant';
	import api from '@/api/gunControl.js'
	import $store from "@/store";
	export default {
		props: {},
		components: {
			NavTop
		},
		setup(props, ctx) {
			const data = reactive({
				list: [],
				showPicker: false,
				showAdd: false,
				columns: [{
					text: '92# 汽油',
					value: '1'
				}, {
					text: '95# 汽油',
					value: '2'
				}, {
					text: '98# 汽油',
					value: '3'
				}, {
					text: '0# 柴油',
					value: '4'
				}, ],
				roleText: '',
				fromData: {
					username: '',
					role: ''
				},
				rulesName: [{
						required: true,
						message: '请输入手机号码'
					},
					{
						pattern: /^1[3-9]\d{9}$/,
						message: '手机号码格式错误'
					}
				],
				checked: false,
				checked2: false,
			})
			watch($store.state, (newVal, oldVal) => {
				if(newVal.areaId) {
					getList()
				}
			}, {
				deep: true
			})
			// 获取加油枪
			const getList = () => {
				api.list({
					gasStationId: $store.state.areaId //加油站id
				}).then(res => {
					data.list = res.rows
				})
			}
			onMounted(() => {
				getList();
			})
			watchEffect(() => {
				data.funcDatas = props.funcData
			})
			const onConfirm = ({
				selectedOptions
			}) => {
				data.fromData.role = selectedOptions[0].value
				data.roleText = selectedOptions[0].text
				data.showPicker = false;
			};
			const onUpdateValue = (newValue) => {
				showConfirmDialog({
					title: '更改油枪状态',
					message: '是否切换开关？',
				}).then(() => {
					api.undateNozzle({
						fuelNozzleId: newValue.fuelNozzleId, // 油枪id
						fuelTypeId: newValue.fuelTypeId, // 油枪类型
						gasStationId: $store.state.areaId, // 加油站id
						name: newValue.name, // 油枪号
						status: newValue.status == 'on' ? 'off' : 'on' // 油枪状态
					}).then(res => {
						getList();
						uni.showToast({
							title: newValue.status == 'on' ? '关闭成功' : '打开成功',
							icon: 'none'
						})
						// data.checked = newValue;
					})
				});
			};
			// 添加成员
			const onClickAdd = () => {
				clearFrom();
				data.showAdd = true
			}
			const clearFrom = () => {
				data.fromData.username = '';
				data.fromData.role = '';
				data.checked2 = false;
			}
			const onSubmit = () => {
				// console.log({
				// 	gasStationId: $store.state.areaId,
				// 	name: data.fromData.username,
				// 	fuelTypeId: data.fromData.role,
				// 	status: data.checked2 ? 'on' : 'off'
				// })
				
				// 提交
				api.nozzle({
					gasStationId: $store.state.areaId,
					name: data.fromData.username,
					fuelTypeId: data.fromData.role,
					status: data.checked2 ? 'on' : 'off'
				}).then(res => {
					getList();
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					})
					data.showAdd = false
				}).catch((err)=>{
					// data.showAdd = false
					showNotify({ type: 'warning', message: err });
					// uni.showToast({
					// 	title: err,
					// 	icon: 'none'
					// })
				})
			}
			return {
				...toRefs(data),
				onConfirm,
				onUpdateValue,
				onClickAdd,
				onSubmit
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.content-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			text-indent: 20rpx;
			margin-top: 20rpx;

			.content-title-rt {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				text-align: left;
				margin-right: 40rpx;

				text {
					display: block;
					text-indent: 10rpx;
				}
			}
		}

		.content-box {
			width: 100%;
			padding: 40rpx 20rpx 0;
			box-sizing: border-box;

			.item-box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 20rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 26rpx;

				&:first-child {
					font-size: 30rpx;
				}

				&>view {
					width: 30%;
				}

				.border-box {
					display: flex;
					justify-content: center;
					// width: 18%;
					height: 60rpx;
					align-items: center;
					line-height: 60rpx;
					border-radius: 22rpx;

					.van-cell {
						padding: 0;
					}
				}
			}

			.shadow {
				box-shadow: 0 0 22rpx 0 rgba(0, 0, 0, .1);
			}
		}
	}
</style>